<template>
  <view class="Global">
    <!-- 背景图片铺满 -->
    <!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
    <bgImage></bgImage>
    <MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>
    <searchInput inputcontent="款号" @sendData="getInputValue"></searchInput>
    <view class="searchPickerContent" id="main">

      <view class="searchPickerContentBg">
        <picker mode="date" :value="queryData.createTimeStart" :start="startDate" :end="endDate" @change="bindDateChange">
          <view class="searchPickerText" v-if="queryData.createTimeStart==''">选择开始时间</view>
          <view class="searchPickerText" v-else>{{queryData.createTimeStart}}</view>
        </picker>
      </view>

      <view class="searchPickerContentBg">
        <picker mode="date" :value="queryData.createTimeEnd" :start="startDate" :end="endDate" @change="bindEndDateChange">
          <view class="searchPickerText" v-if="queryData.createTimeEnd==''">选择结束时间</view>
          <view class="searchPickerText" v-else>{{queryData.createTimeEnd}}</view>
        </picker>
      </view>

    </view>

    <scroll-view scroll-y="true">
      <view>
        <!-- 详情开始 -->
        <view class="contentCenter">

          <view class="contentCenterInner">

            <!-- 每日完成列表 -->
            <!-- 扫菲记录 -->
            <view class="contentCenterInnerList">

              <view class="contentCenterInnerListItem">
                <view class="contentCountTimeNew">
                  <view class="contentCenterInnerListItemContent2">
                    <view class="contentCountTime">
                      <!-- 列表标题 -->

                      <view class="titleStyleNew">
                        <text class="titleStyleNumNewXh">扎号</text>
                        <text class="titleStyleNumNew">颜色</text>
                        <text class="titleStyleNumNew">尺码</text>
                        <text class="titleStyleNumNewGX">姓名</text>
                        <text class="titleStyleNumNew">数量</text>
                        <text class="titleStyleNumNewGX">入菲日期</text>
                      </view>

                      <scroll-view scroll-y="true" class="titleStyleTitleNew">
                        <!-- 列表内容 -->
                        <view v-for="(item,index) in registerList">
                          <view class="titleStyleListNew" v-if="index%2==0">
                            <text class="titleStyleNumListNewXh">{{item.bundleCode}}</text>
                            <text class="titleStyleNumListNewGX">{{item.colors}}</text>
                            <text class="titleStyleNumListNew">{{item.sizes}}</text>
                            <text class="titleStyleNumListNewGX">{{item.userName}}</text>
                            <text class="titleStyleNumListNew">{{item.quantity}}</text>
                            <text class="titleStyleNumListNewGX">{{item.createTime}}</text>
                          </view>
                          <view class="titleStyleListElseNew" v-if="index%2!=0">
                            <text class="titleStyleNumListNewXh">{{item.bundleCode}}</text>
                            <text class="titleStyleNumListNew">{{item.colors}}</text>
                            <text class="titleStyleNumListNew">{{item.sizes}}</text>
                            <text class="titleStyleNumListNewGX">{{item.userName}}</text>
                            <text class="titleStyleNumListNew">{{item.quantity}}</text>
                            <text class="titleStyleNumListNewGX">{{item.createTime}}</text>
                          </view>
                        </view>

                      </scroll-view>

                    </view>
                  </view>
                </view>

              </view>
            </view>


          </view>


        </view>
        <!-- 详情结束 -->

      </view>
    </scroll-view>

  </view>
</template>

<script>
import MyNav from '@/components/customnavbar.vue'
import searchInput from '@/components/searchInput.vue'
import bgImage from '@/components/backgroundImage.vue'
import {
  getOrderProduceDetail,getOrderRegisterList
} from "@/pages/api/api";
import config from "@/pages/api/config";

export default {
  components: {
    MyNav,
    bgImage,
    searchInput
  },
  data() {
    return {
      title: '扎号数量',
      isback: true,
      apiUrl: config.apiUrl,

      listData: {},
      queryData: {
        styleName: '',
        storeId: '',
        tenantId: '',
        createTimeStart: '',
        createTimeEnd: '',
        status: '',
      },

      listItem: [{
        title: '扎号',
        content: '10'
      },
        {
          title: '数量',
          content: '0'
        }
      ],
      processData: '',
      todayData: {},
      allData: {},

      // 列表数据
      listDataItem: [],
      registerList: [],
      today: '',
      scrollViewHeight: 0,

    }
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  onReady() {
    // 获取距离顶部的距离
    let query = uni.createSelectorQuery().in(this);
    query.select('#main').boundingClientRect(data => {
      // console.log(data);
      this.mainTop = data.top

      // 在其他页面或组件中访问
      const app = getApp();
      this.scrollViewHeight=app.globalData.system.screenHeight-this.mainTop-app.globalData.totalHeight
    }).exec();

  },
  onLoad: function(option) {
    // 在其他页面或组件中访问
    const app = getApp();
    this.scrollViewHeight = app.globalData.scrollViewHeight2
    let item = JSON.parse(decodeURIComponent(option.item));
    console.log('item',item)
    this.listData = item;
    const now = new Date();
    this.today =
        `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
    this.orderSplittingUpDetail(item.orderId,item.processId);
  },
  methods: {
    // 获取输入框的值
    getInputValue(e){
      console.log('获取输入框的值',e);
    },
    orderSplittingUpDetail(orderId,processId) {
      getOrderRegisterList({orderId: orderId,processId: processId}).then(res => {
        if (res.code == 200) {
          this.registerList = res.rows
        }
      })
    },
    bindDateChange: function(e) {
      this.queryData.createTimeStart = e.detail.value
    },
    bindEndDateChange: function(e) {
      this.queryData.createTimeEnd= e.detail.value
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        month = month + 1;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
  }
}
</script>

<style>

.titleStyleNumListNewXh {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100rpx;
  height: 100%;
  font-size: 24rpx;
  color: #333333;

  text-align: left;
  font-style: normal;
  text-transform: none;
  white-space: nowrap;
}
.titleStyleNumListNewGX {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 200rpx;
  height: 100%;
  font-size: 24rpx;
  color: #333333;

  text-align: left;
  font-style: normal;
  text-transform: none;
  white-space: nowrap;
}
.titleStyleNumListNew {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 130rpx;
  height: 100%;
  font-size: 24rpx;
  color: #333333;

  text-align: left;
  font-style: normal;
  text-transform: none;
  white-space: nowrap;
}

.titleStyleListElseNew {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 80rpx;
  background: #F9FCFF;
}

.titleStyleListNew {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  width: 100%;
  height: 80rpx;

}

.titleStyleTitleNew {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 560rpx;
  background: #FFFFFF;
  border-radius: 0rpx 0rpx 30rpx 30rpx;
}

.titleStyleNumNewXh {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100rpx;
  height: 100%;
  font-size: 24rpx;
  color: #FFFFFF;

  text-align: center;
  font-style: normal;
  text-transform: none;

  white-space: nowrap;
}

.titleStyleNumNewGX {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 200rpx;
  height: 100%;
  font-size: 24rpx;
  color: #FFFFFF;

  text-align: center;
  font-style: normal;
  text-transform: none;

  white-space: nowrap;
}

.titleStyleNumNew {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 130rpx;
  height: 100%;
  font-size: 24rpx;
  color: #FFFFFF;

  text-align: center;
  font-style: normal;
  text-transform: none;

  white-space: nowrap;
}

.titleStyleNew {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 80rpx;
  background: #0081FF;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  /*margin-top: 42rpx*/
}

.contentCenterInnerListItemContent2 {

  display: flex;
  justify-content: center;
  flex-direction: column;

}

.contentCountTime {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.contentCountTimeNew {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;

  white-space: nowrap;

  overflow-x: scroll;
  display: -webkit-box;
  overflow-y: hidden;
}

.contentCenterInnerListItemContentBottomText {

  font-family: HarmonyOS Sans SC;
  font-weight: bold;
  font-size: 28rpx;
  color: #333333;
  height: 100%;
  width: 100%;
  margin-left: 30rpx;
  display: flex;
  justify-content: left;
  align-items: center;
  border-right: #ECF5FD solid 1rpx;
}

.contentCenterInnerListItemContentBottom {

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 50%;
}

.contentCenterInnerListItemContentBottomNew {

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 50%;
  white-space: nowrap;
  overflow-x: auto;
  display: -webkit-box;
  overflow-y: hidden;
}

.contentCenterInnerListItemContentTopText {

  font-family: HarmonyOS Sans SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  height: 100%;
  width: 100%;
  margin-left: 30rpx;
  display: flex;
  justify-content: left;
  align-items: center;
  border-right: #ECF5FD solid 1rpx;
}

.contentCenterInnerListItemContentTopTextNew {


  font-weight: 500;
  font-size: 32rpx;
  color: #999999;
  min-height: 50rpx;
  /* height: 100%; */
  min-width: 100rpx;
  margin-left: 30rpx;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #000;

  white-space: nowrap;
}

.contentCenterInnerListItemContentTopNewScroll {

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 630rpx;

  background-color: aqua;
  white-space: nowrap;
}

.contentCenterInnerListItemContentTopNew {

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50%;

  white-space: nowrap;

  overflow-x: auto;
  display: -webkit-box;
  overflow-y: hidden;

}

::-webkit-scrollbar {
  display: none;
}

.contentCenterInnerListItemContentTop {

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 50%;
  color: #4d7df9;
}

.contentCenterInnerListItemContent {

  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 630rpx;
  /*min-height: 124rpx;*/

  height: 124rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.contentCenterInnerListItemContent2 {

  display: flex;
  justify-content: center;
  flex-direction: column;


  /* height: 124rpx; */
  /* 	background: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 30rpx; */
}


.contentCenterInnerListItemContentNew {

  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  min-height: 124rpx;

  /* height: 124rpx; */
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 50rpx;


  white-space: nowrap;

  overflow-x: auto;
  display: -webkit-box;
  overflow-y: hidden;
}

.contentCenterInnerListItem {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;



  width: 100%;
}

.contentCenterInnerList {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  background: #F5F7F9;

  width: 100%;
  /*margin-top: 30rpx;*/
}

.baseListItemColorLeftInnerBg {
  width: 40rpx;
  height: 40rpx;
  border-radius: 10rpx;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-right: 18rpx;


}

.baseListItemColorLeftInnerText_1 {
  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #999999;
  line-height: 100rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.baseListItemColorLeftInnerText_2 {
  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #999999;
  line-height: 100rpx;

  display: flex;
  justify-content: left;
  align-items: left;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.baseListItemColorLeftInnerText {

  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #333333;
  line-height: 100rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.baseListItemColorLeftInnerText2 {

  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #333333;
  line-height: 100rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.baseListItemColorLeftInnerItemRight {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 315rpx;
  height: 80rpx;
  /* background: #F5F7F9; */

  border-bottom: #F5F7F9 solid 1rpx;

}

.baseListItemColorLeftInnerItemRight2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 315rpx;
  height: 80rpx;

  border-bottom: #F5F7F9 solid 1rpx;

}

.baseListItemColorRight {

  display: flex;
  flex-direction: row;
  justify-content: center;

  width: 630rpx;
  height: 160rpx;
  background: #FFFFFF;
  border-radius: 10rpx;


  flex-wrap: wrap;


}

.baseListItemColorRightItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  flex: 0 0 calc((100%)/2);

}

.contentCenterTopRight {
  display: flex;
  font-family: HarmonyOS Sans SC;
  font-weight: bold;
  font-size: 24rpx;
  color: #333333;
  /*line-height: 80rpx;*/
  margin-right: 30rpx;

}

.contentCenterTopLeft {
  display: flex;
  font-family: HarmonyOS Sans SC;
  font-weight: bold;
  font-size: 24rpx;
  color: #333333;
  /*line-height: 120rpx;*/
  margin-left: 30rpx;
}

.contentCenterTop {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.contentCenterInner {
  width: 690rpx;
  /*margin-top: 30rpx;*/
  background: #F5F7F9;
  border-radius: 30rpx 30rpx 0rpx 0rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.contentCenter {
  width: 750rpx;
  margin-top: 30rpx;
  background: #FFFFFF;
  border-radius: 30rpx 30rpx 0rpx 0rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}



.listDataInnerTopRightText {
  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #333333;
  line-height: 50rpx;
}


.listDataInnerTopRightImgBg {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  top: 30rpx;
  right: 30rpx;
}

.listDataInnerTopRightImg {
  width: 50rpx;
  height: 50rpx;
  padding: 10rpx;

}

.listDataInnerTopRight {
  display: flex;
  flex-direction: column;
  align-items: left;


  margin-top: 30rpx;
}

.listDataInnerTopLeft {
  width: 190rpx;
  height: 190rpx;
  background: #ECF5FD;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  margin-right: 30rpx;
  margin-left: 30rpx;
  margin-top: 30rpx;
}

.listDataInnerTopLeftImg {
  width: 188rpx;
  height: 148rpx;

}

.progress-box_progress {
  display: flex;
  width: 380rpx;
  height: 10rpx;
  border-radius: 5rpx;
}

.progress-box_text {
  color: #666666;
  margin-left: 30rpx;
  font-size: 24rpx;
  font-weight: 600;
}

.progress-box_text1 {
  color: #0081FF;
  margin-left: 10rpx;
  font-size: 24rpx;
}

.progress-box {

  display: flex;
  flex-direction: row;

  display: flex;
  justify-conent: left;
  width: 380rpx;
  height: 6rpx;
  border-radius: 5rpx;

  /* background-color: #333333; */
}

.progress-box_out {
  margin-top: 30rpx;
  display: flex;
  flex-direction: row;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  border-radius: 5rpx;

  /* background-color: #333333; */
}


.listDataInnerTop {
  position: relative;
  display: flex;
  flex-direction: row;

  display: flex;
  justify-content: left;
  width: 100%;
  /* background: #0AE1C6; */


}

.listDataOut {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 750rpx;
  margin-top: 30rpx;
  height: 800rpx;
}


.contentListOutInner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.listDataInner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;

  width: 690rpx;
  height: 295rpx;
  background: #FFFFFF;
  border-radius: 30rpx;


  margin-bottom: 20rpx;
}
.searchPickerContentBg {
  width: 330rpx;
  height: 60rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  margin-right: 15rpx;
  margin-left: 15rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;


}

.searchPickerContent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  margin-top: 30rpx;




}
</style>
